import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class FormsDemoHome extends StatelessWidget {
  const FormsDemoHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("表单Widget"),
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Text("TextField"),
            TextFieldDemo(),
            SizedBox(
              height: 15,
            ),
            Text("Form表单"),
            SizedBox(
              height: 10,
            ),
            FormDemo()
          ],
        ),
      ),
    );
  }
}

/// 一些属性比较简单：keyboardType键盘的类型，style设置样式，textAlign文本对齐方式，maxLength最大显示行数等等；
// decoration：用于设置输入框相关的样式
//   icon：设置左边显示的图标
//   labelText：在输入框上面显示一个提示的文本
//   hintText：显示提示的占位文字
//   border：输入框的边框，默认底部有一个边框，可以通过InputBorder.none删除掉
//   filled：是否填充输入框，默认为false
//   fillColor：输入框填充的颜色
// controller：
//   onChanged：监听输入框内容的改变，传入一个回调函数
//   onSubmitted：点击键盘中右下角的down时，会回调的一个函数
class TextFieldDemo extends StatefulWidget {
  const TextFieldDemo({Key? key}) : super(key: key);

  @override
  _TextFieldDemoState createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State<TextFieldDemo> {
  final textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 设置默认值
    textEditingController.text = "Hello World";
    // 监听文本框
    textEditingController.addListener(() {
      print("textEditingController: ${textEditingController.text}");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        controller: textEditingController,
        decoration: InputDecoration(
            icon: Icon(Icons.people),
            border: InputBorder.none,
            fillColor: Colors.lightGreen,
            filled: true,
            labelText: "username",
            hintText: "请输入用户名"),
        onChanged: (s) {
          print("onchange: $s");
        },
        onSubmitted: (v) {
          print("onsubmit: $v");
        },
      ),
    );
  }
}

class FormDemo extends StatefulWidget {
  const FormDemo({Key? key}) : super(key: key);

  @override
  _FormDemoState createState() => _FormDemoState();
}

/// 在我们开发注册、登录页面时，通常会有多个表单需要同时获取内容或者进行一些验证，如果对每一个TextField都分别进行验证，是一件比较麻烦的事情。
//
// 做过前端的开发知道，我们可以将多个input标签放在一个form里面，Flutter也借鉴了这样的思想：我们可以通过Form对输入框进行分组，统一进行一些操作。

// Form表单也是一个Widget，可以在里面放入我们的输入框。
//
// 但是Form表单中输入框必须是FormField类型的
//
// 我们查看刚刚学过的TextField是继承自StatefulWidget，并不是一个FormField类型；
//
// 我们可以使用TextFormField，它的使用类似于TextField，并且是继承自FormField的；

class _FormDemoState extends State<FormDemo> {
  final registerFromKey = GlobalKey<FormState>();
  late String username, password;

  void registerForm() {
    /// 保存状态
    registerFromKey.currentState!.save();
    print("registerForm username：$username , password: $password");
    Fluttertoast.showToast(msg: "用户信息 username：$username , password: $password");
    /// 信息校验
    // registerFromKey.currentState!.validate();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Form(
        key: registerFromKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              onSaved: (v) {
                this.username = v!;
              },
              decoration: InputDecoration(
                  icon: Icon(Icons.people), labelText: "用户名或手机号"),
             validator: (value){
                if(value!.isEmpty){
                  return "账号不能为空";
                }
                return null;
             },
              autovalidate: true, // 自动校验，不需要使用registerFromKey.currentState.validate();
            ),
            TextFormField(
              onSaved: (v) {
                this.password = v!;
              },
              decoration:
                  InputDecoration(icon: Icon(Icons.lock), labelText: "密码"),
              obscureText: true,
            ),
            SizedBox(
              height: 16,
            ),
            Container(
              width: double.infinity,
              height: 44,
              child: RaisedButton(
                color: Colors.lightGreen,
                child: Text(
                  "注 册",
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
                onPressed: () {
                  Fluttertoast.showToast(msg: "点击了注册按钮");
                  registerForm();
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}
